$dark_gray: #889aa4;


.login-btn {
  width: 100%;

  height: 40px;
  font-weight: bold;
  margin-bottom: 10px;
  border-radius: 0;

}

:deep(.el-button > span) {
  font-size: 16px;
}

:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 0 transparent !important;
  border-bottom: 1px solid #f56c6c !important;
}

.login-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;

  .main_box {
    height: 100%;

    .login-left_img {
      height: 100%;

      // margin-right: 480px;
      .login_img {
        min-width: 260px;
        height: 100%;
        /* 使用过渡效果 */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        // background-image: url('@/assets/logo/login/bg.jpg');
        animation: bg-image-animation-saas 30s infinite ;//saas
        // animation: bg-image-animation 30s infinite ;//格美棋
        // animation: bg-image-animation-sld 40s infinite; //施罗德

        // filter: brightness(60%);
        .text_tip {
          position: relative;
          top: 20%;
          color: #fff;

          h3 {
            font-size: 32px;
            margin-bottom: 20px;
          }

          p {
            font-size: 16px;
          }
        }
      }

      // /* 定义动画 saas*/
      @keyframes bg-image-animation-saas {

        0%,
        50% {
          background-image: url('@/assets/login/login_bg1.jpg');
        }

        50%,
        100% {
          background-image: url('@/assets/login/login_bg2.jpg');
        }

        100% {
          background-image: url('@/assets/login/login_bg1.jpg');
        }
      }

      /* 定义动画  格美棋*/
      @keyframes bg-image-animation {

        0%,
        33% {
          background-image: url('@/assets/login/gemake/gemake_1.jpg');
        }

        33%,
        66% {
          background-image: url('@/assets/login/gemake/gemake_2.jpg');
        }

        66%,
        100% {
          background-image: url('@/assets/login/gemake/gemake_3.jpg');
        }

        100% {
          background-image: url('@/assets/login/gemake/gemake_1.jpg');
        }
      }

      /* 定义动画  施罗德*/
      @keyframes bg-image-animation-sld {

        0%,
        32% {
          background-image: url('@/assets/login/sld/1.jpg');
        }

        33%,
        65% {
          background-image: url('@/assets/login/sld/2.jpg');
        }

        66%,
        99% {
          background-image: url('@/assets/login/sld/3.jpg');
        }

        100% {
          background-image: url('@/assets/login/sld/1.jpg');
        }
      }
    }

    .login-box {
      position: relative;
      width: 480px;
      height: 100%;
      float: right;
      background-color: #ffffffe6;
      z-index: 2;
      overflow-y: auto;
      height: 100%;
      display: flex;
      flex-direction: column;

      .logo-big {
        text-align: center;
        vertical-align: middle;
        margin-top: 48px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;

        .logo_image {
          width: 336px;
          height: 158px;
        }

        .name-logo {
          font-size: 32px;
          // color: #007cff;
          color: #000000a0;
          // font-weight: bold;
          width: 342px;
          letter-spacing: 6px;
          // text-shadow: 1px 1px 3px #007DFE;
          // text-shadow: 1px 1px 3px #000000bd;
        }
      }

      .login-form {
        padding: 40px 40px 0px;
        box-sizing: border-box;
        flex: 1;

        .text {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;

          .goRegister {
            color: #007cff;
            font-size: 14px;
            display: flex;
            align-items: center;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }

      .login-title {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;

        .title {
          margin: 0;
          font-size: 14px;
          text-align: left;
          letter-spacing: 2px;
        }


      }
    }
  }


  .footer_text {
    font-size: 12px;
    padding-bottom: 10px;
    position: relative;
    bottom: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;

    .url_link {
      color: #999;
    }
  }
}

.login-dark {
  position: absolute;
  right: 20px;
  top: 20px;
}

.tabs {
  height: 40px;
  width: 100%;
  background-color: #f3f7fb;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  border-radius: 0;
  justify-content: space-between;

  .tab_display {
    display: flex;
  }

  .tab {
    padding: 2px;
    color: #999;
    margin: 0 8px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }

  .tab_temp {
    color: #007cff;
    border-bottom: 2px solid #007cff;
  }
}

@media screen and (max-width: 480px) {
  .login-container {
    .main_box {
      .login-box {
        width: 100%;

        .login-form {
          padding: 10% 24px 20px;
        }
      }
    }

  }
}

:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    text-align: left;
  }

  .el-input__wrapper {
    padding: 1px 11px;
  }
}

.el-item {
  margin-bottom: 20px;
}

.el-item_login {
  margin-bottom: 30px;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  border-radius: 0;
  height: 35px;
  box-shadow: 0 0 0 1px transparent;
  border-bottom: 1px solid #dcdfe6 !important;

  &.is-focus {
    box-shadow: 0 0 0 1px transparent;
    border-bottom: 1px solid #007cff !important;
  }
}

:deep(.el-input .el-input__wrapper) {
  box-sizing: border-box;

  &.is-focus {
    box-shadow: 0 0 0 1px transparent;
    border-bottom: 1px solid #007cff !important;
  }
}

.check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0;

  .check_left {
    span {
      color: #000;
    }

    .agree_re {
      display: flex;
      color: #999;

      span {
        color: #007cff;
        cursor: pointer;
      }
    }
  }

  .check_right {
    cursor: pointer;
  }
}

.agree {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #999;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  white-space: pre-wrap;

  a {
    color: #007cff;
    cursor: pointer;
  }
}

.getcode {
  color: #007cff;
  cursor: pointer;
}

:deep(.el-form-item__error) {
  padding-top: 4px;
}